<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='登录',active='home'">
<head th:replace="layout/common::headerFragment(${title},${active})"></head>
<body>
<header th:replace="layout/common::header-body"></header>

<div class="ui main container">
    <div class="ui grid stackable two column" style="min-height: 700px;">
        <div class="twelve wide column">
            <div class="ui segment">
                <div class="ui breadcrumb">
                    <a class="section">主页</a>
                    <div class="divider"> / </div>
                    <a class="active section">登录</a>
                </div>
                <h1>用户登录</h1>
                <form class="ui form">
                    <div class="field">
                        <label>用户名</label>
                        <div class="ui left icon input">
                            <input type="text" name="username" placeholder="用户名">
                            <i class="user icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>密码</label>
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" name="terms" tabindex="0" class="hidden">
                            <label>记住登录信息</label>
                        </div>
                    </div>
                    <div class="field">
                        <a href="/">忘记密码</a>
                        <span style="margin-left: 10px;">没有账号？<a href="/register">马上注册</a></span>
                    </div>
                    <button class="ui primary button" type="submit">提交</button>

                    <div class="ui error message"></div>
                </form>

            </div>
        </div>
        <div class="four wide column">
            <div class="ui segment">
                欢迎登录
            </div>
        </div>
    </div>
</div>

<footer th:replace="layout/common::footer-body"></footer>

<script>
    $('.ui.form')
        .form({
            fields: {
                name: {
                    identifier: 'username',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入您的用户名'
                        }
                    ]
                },
                password: {
                    identifier: 'password',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入您的密码'
                        },
                        {
                            type: 'minLength[6]',
                            prompt: '密码至少要{ruleValue} 位'
                        }
                    ]
                }
            },
            onSuccess: function (e) {
                $("[type=submit]").addClass("loading");
                //阻止表单的提交
                e.preventDefault();
                //调用ajax提交
                var data_post = {"userName": $("[name='username']").val(), "password": $("[name='password']").val()};
                $.ajax({
                    type:"POST",                      //请求类型
                    url: "/login",           //URL
                    data: JSON.stringify(data_post),   //传递的参数
                    dataType:"json",                 //返回的数据类型
                    contentType: "application/json;charset=UTF-8",
                    success:function(data){          //data就是返回的json类型的数据
                        $("[type=submit]").removeClass("loading");
                        if(data.code == "0000"){
                            swal({text:"登录成功",icon: "success"});
                            window.location.href='/';
                        }else{
                            swal({text:date.msg, icon: "warn"});
                        }
                    },
                    error:function(data){
                        $("[type=submit]").removeClass("loading");
                        swal("登录失败");
                    }
                });
            }
        });
</script>
</body>
</html>
